<template>
    <div class="sidebar-top">
        <!-- 顶部 -->
        <div>星巴克后台管理</div>
        <div>退出</div>
    </div>
    <div class="sidebar-cont">
        <!-- default-active 选中第2个 :default-active 动态-->
        <el-menu :default-active="ac_index" @select="Select">
            <div v-for="(item, index) in menu" :key="index">
                <el-menu-item v-if="item.Subclass.length == 0" :index="item.id">
                    <!-- <template #title>
                        <el-icon><Histogram /></el-icon>
                        <span>{{ item.title }}</span>
                  </template> -->
                    <el-icon>
                        <!-- <Histogram /> -->
                        <!-- vue2 的写法 -->
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.title }}</span>
                </el-menu-item>
                <!-- <el-menu-item index="2">菜单二</el-menu-item>
                <el-menu-item index="3">菜单三</el-menu-item> -->
                <!-- 二级、三级菜单 -->
                <el-sub-menu v-if="item.Subclass.length > 0" :index="item.id">
                    <!-- 二级要包到template里，要不报错，一级可以不用包 -->
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </template>
                    <span>{{ item.title }}</span>
                    <div v-for="(two, index_two) in item.Subclass" :key="index_two">
                        <!-- <template #title>菜单四</template> -->
                        <el-menu-item :index="two.id">{{ two.title }}</el-menu-item>
                        <!-- <el-menu-item index="4-2">菜单四-2</el-menu-item>
                        <el-menu-item index="4-3">菜单四-3</el-menu-item> -->
                    </div>
                </el-sub-menu>
            </div>

        </el-menu>
        <!-- <router-view></router-view> -->
    </div>
</template>
<!--  <script lang="ts" setup>  -->
<script lang="ts">
import { Histogram, UserFilled, CreditCard, Bowl, Avatar } from '@element-plus/icons-vue'
import { reactive, shallowRef, ref, onMounted } from 'vue'

export default {
    components: { // 注册
        Histogram,
        UserFilled,
        CreditCard,
        Bowl,
        Avatar
    },
    setup() {
        const ac_index = ref('1') // 默认选中第一个

        const Array = [
            {
                id: '1',
                icon: Histogram,
                title: '数据分析',
                router: '',
                Subclass: [] // 是否有二级、三级菜单
            },
            {
                id: '2',
                icon: UserFilled,
                title: '用户列表',
                router: '',
                Subclass: [] // 是否有二级、三级菜单
            },
            {
                id: '3',
                icon: CreditCard,
                title: '订单管理',
                router: '',
                Subclass: [] // 是否有二级、三级菜单
            },
            {
                id: '4',
                icon: Bowl,
                title: '菜品管理',
                router: '',
                Subclass: []
            },
            {
                id: '5',
                icon: Avatar,
                title: '员工管理',
                router: '',
                Subclass: [
                    {
                        id: '5-1',
                        title: '员工详情',
                        router: ''
                    },
                    {
                        id: '5-2',
                        title: '其他页面',
                        router: ''
                    }
                ]
            }
        ]

        // shallowRef 基础类型数据
        // const menu = reactive(Array) // reactive 响应式
        const menu = shallowRef(Array) // 不是响应式

        // 菜单激活回调
        function Select(index: string, path: string) {
            console.log(index, path)
            // 本地缓存，JSON.stringify 变成数字类型
            localStorage.setItem('menuid', JSON.stringify(index))
        }

        // 生命周期函数
        onMounted(() => {
            ac_index.value = JSON.parse(localStorage.getItem('menuid'))
        })

        return {
            menu,
            ac_index,
            Select
        }
    }
}

</script>
<style scoped></style>